<script lang="ts" setup>
	import { ref } from "vue"
	import { UserApi } from '@/api/user';
	import { message } from 'ant-design-vue';
	import { useUserStore } from '@/stores/user';
	import { usePopupStore } from '@/stores/popup'
	import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue';
	const usePopup = usePopupStore()
	const userStore = useUserStore()
	let passwordObj = ref({
		oldPassword: '',
		newPassword: '',
		confirmPassword: '',
	})
	const exit = (type : string) => {
		usePopup.setPopup(type)
		passwordObj.value = {
			oldPassword: '',
			newPassword: '',
			confirmPassword: '',
		}
	}
	const submit = () => {
		if (passwordObj.value.oldPassword.length < 6 || passwordObj.value.newPassword.length < 6) {
			message.error('密码至少为6位');
			return false
		}
		if (passwordObj.value.oldPassword == passwordObj.value.newPassword) {
			message.error('原密码与新密码不能相同');
			return false
		}
		if (passwordObj.value.newPassword != passwordObj.value.confirmPassword) {
			message.error('两次密码不一致');
			return false
		}
		UserApi.updatePassword(passwordObj.value).then((res : any) => {
			if (res.code == 1) {
				message.success(res.message);
				userStore.setUser('')
				exit('')
			} else if (res.code == 0) {
				message.error(res.message);
			}
		})
	}
	let oldInputType = ref('password')
	let inputType = ref('password')
	let confirmInputType = ref('password')
	const iconStyle = {
		color: 'rgba(0, 0, 0, 0.45)'
	}
</script>

<template>
	<a-modal :open="true" :footer="null" @cancel="exit('')" centered width="650px" :getContainer="false">
		<div class="content">
			<div class="title">
				<div class="line"></div>修改密码
			</div>
			<div class="info-box">
				<div class="item">
					<div class="lebel">
						<span>*</span>原密码：
					</div>
					<div class="text">
						<a-input v-model:value="passwordObj.oldPassword" :type="oldInputType" placeholder="原密码"
							class="input">
							<template #suffix>
								<eye-invisible-outlined :style="iconStyle" @click="oldInputType = 'text'"
									v-if="oldInputType == 'password'" />
								<eye-outlined :style="{color:'#1677ff'}" @click="oldInputType = 'password'" v-else />
							</template>
						</a-input>
					</div>
				</div>
				<div class="item">
					<div class="lebel">
						<span>*</span>新密码：
					</div>
					<div class="text">
						<a-input v-model:value="passwordObj.newPassword" :type="inputType" placeholder="新密码"
							class="input">
							<template #suffix>
								<eye-invisible-outlined :style="iconStyle" @click="inputType = 'text'"
									v-if="inputType == 'password'" />
								<eye-outlined :style="{color:'#1677ff'}" @click="inputType = 'password'" v-else />
							</template>
						</a-input>
					</div>
				</div>
				<div class="item">
					<div class="lebel">
						<span>*</span>确认密码：
					</div>
					<div class="text">
						<a-input v-model:value="passwordObj.confirmPassword" :type="confirmInputType" placeholder="确认密码"
							class="input">
							<template #suffix>
								<eye-invisible-outlined :style="iconStyle" @click="confirmInputType = 'text'"
									v-if="confirmInputType == 'password'" />
								<eye-outlined :style="{color:'#1677ff'}" @click="confirmInputType = 'password'"
									v-else />
							</template>
						</a-input>
					</div>
				</div>
			</div>
			<div class="btn-box">
				<a-button type="primary" class="btn" @click="submit">
					保存
				</a-button>
				<a-button type="default" class="btn" @click="exit('')">
					取消
				</a-button>
			</div>
		</div>
	</a-modal>
</template>

<style lang="scss" scoped>
	.ant-modal-content {
		padding: 0;
	}

	.content {
		padding: 0 20px;

		.title {
			font-size: 18px;
			padding-bottom: 15px;
			border-bottom: 1px solid #ccc;
			display: flex;
			align-items: center;

			.line {
				border-radius: 4px;
				width: 4px;
				height: 20px;
				background-color: #1677ff;
				margin-right: 8px;
			}
		}

		.info-box {
			margin-top: 20px;


			.item {
				margin-top: 20px;
				display: flex;
				align-items: center;

				.lebel {
					margin-right: 10px;
					width: 80px;
					text-align: right;

					span {
						color: red;
					}
				}

				.text {
					flex: 1;

					.input {
						height: 34px;
						border: solid 1px #d9d9d9;
						border-radius: 6px;
						font-size: 14px;
					}

					.input:focus {
						box-shadow: 0 0 0 2px rgb(5, 145, 255, 10%);
						border-color: #4096ff;
					}

					.input:hover {
						border-color: #4096ff;
					}

					::placeholder {
						color: #bfbfbf;
						font-size: 14px;
					}
				}
			}

			.signature {
				margin-top: 30px;
				display: block;
				width: 100%;
			}
		}

		.btn-box {
			margin-top: 30px;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn {
				margin: 0 20px;
			}
		}

	}
</style>